<template>
	<div class="container">
		<el-container style="height: 100%;  border: 1px solid #eee">
			<el-aside style="background-color: rgb(238, 241, 246);">
				<div class="aside-left">
					<div class="aside-left-title">
						<image class="aside-left-title-img" src="../../static/image/logo.jpg" mode="widthFix"></image>
						<div class="aside-left-title-name">柠玉百图库</div>
					</div>
					<div class="aside-left-nav">
						<div :class="'itam '+(m==index ? 'click' : '')" @click="nav_click(item,m)"
							v-for="(item,m) in nav">
							<i :class="item.icon">{{item.title}}</i>
						</div>
					</div>
				</div>
				<div class="aside-right">
					<div class="aside-right-title">主页</div>
					<div @click="nav_children(item,m)" class="item" v-for="(item,m) in nav[index].children">
						<div :class="'item_text '+(m==index1 ? 'click' : '')">
							{{item.title}}
						</div>
					</div>
				</div>
			</el-aside>

			<el-container>
				<el-header style="text-align: right; font-size: 12px">
					<el-dropdown>
						<i class="el-icon-setting" style="margin-right: 15px"></i>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>查看</el-dropdown-item>
							<el-dropdown-item>新增</el-dropdown-item>
							<el-dropdown-item>删除</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
					<span>王小虎</span>
				</el-header>

				<el-main>
					<component :id="id" @fuc="jump" :is="currentComponent"></component>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				currentComponent: 'home',
				id: "",
				index: 0,
				index1: 0,
				login: {},
				nav: [{
						title: '主页',
						icon: 'el-icon-s-home',
						children: [{
							title: '数据',
							router: 'home',
						}]
					},
					{
						title: '商品',
						icon: 'el-icon-s-goods',
						children: [{
								title: '商品列表',
								router: 'goodList',
							},
							{
								title: '添加商品',
								router: 'MyComponentA',
							}
						]
					}, {
						title: '标签',
						icon: 'el-icon-menu',
						children: [{
							title: '标签列表',
							router: 'tagsList',
						}]
					},
					{
						title: '操作',
						icon: 'el-icon-s-tools',
						children: [{
								title: '图包审核',
								router: 'goodexamine',
							},
							{
								title: '订单列表',
								router: 'goodlist',
							}
						]
					}, {
						title: '创作',
						icon: 'el-icon-edit-outline',
						children: [{
								title: '轮播列表',
								router: 'swiperList',
							},
							{
								title: '壁纸列表',
								router: 'walllist',
							},
							{
								title: '添加壁纸',
								router: 'walladd',
							},

							{
								title: '壁纸标签',
								router: 'wallTaglist',
							}
						]
					},
				]
			}
		},
		components: {
			// 主页
			home: () => import('../ningy/home/home.vue'),
			goodList: () => import('../ningy/good/list.vue'),
			goodupdate: () => import('../ningy/good/update.vue'),
			MyComponentA: () => import('../ningy/good/add.vue'),
			swiperList: () => import('../ningy/swiper/list.vue'),
			tagsList: () => import('../ningy/tags/list.vue'),
			// 壁纸
			walladd: () => import('../ningy/wallpaper/add.vue'),
			walllist: () => import('../ningy/wallpaper/list.vue'),
			// 壁纸标签
			wallTaglist: () => import('../ningy/wallpaperTag/list.vue'),

			//管理
			goodexamine: () => import('../ningy/ningyu/good_examine.vue'),
			//订单列表
			goodlist: () => import('../ningy/ningyu/goodList.vue')
		},
		onLoad() {

		},
		onShow() {
			var jsonString = JSON.stringify(this.nav);
			console.log(jsonString);
			let login = uni.getStorageSync('login')
			if (login.user == undefined) {
				this.$message({
					message: '请登录账号！！',
					type: 'warning'
				});
				uni.redirectTo({
					url: '/pages/login/login'
				});
			}
		},
		methods: {
			jump(n, m) {
				console.log(n, m)
				this.currentComponent = n
				this.id = m
			},
			nav_click(n, m) {
				console.log(n, m)
				this.index = m
				this.index1 = 0
				this.currentComponent = n.children[this.index1].router
			},
			nav_children(n, m) {
				this.index1 = m
				this.currentComponent = this.nav[this.index].children[this.index1].router
			}
		}
	}
</script>

<style lang="scss">
	.container {
		position: absolute;
		width: 100vw;
		height: 100vh;
	}

	.el-header,
	.el-footer {
		background-color: #B3C0D1;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-aside {
		width: 270px !important;
		background-color: #D3DCE6;
		color: #333;
		text-align: center;
		line-height: 200px;
		position: relative;

		.aside-left {
			position: absolute;
			left: 0;
			width: 130px;
			height: 100%;
			background-color: #444;
			float: left;
			z-index: 5;

			.aside-left-title {
				width: 100%;
				height: 100px;

				.aside-left-title-img {
					width: 50px;
					float: left;
					margin-left: calc(50% - 25px);
					margin-top: 10px;
				}

				.aside-left-title-name {
					float: left;
					width: 104px;
					height: 30px;
					text-align: center;
					background-color: #333;
					margin-left: 13px;
					line-height: 30px;
					color: #fff;
					font-weight: bold;
					margin-top: 5px;
					border-radius: 2px;
				}
			}

			.aside-left-nav {
				margin-top: 10px;
				width: 100%;
				height: 70%;

				.itam {
					width: 100%;
					height: 60px;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					letter-spacing: 2px;
					font-size: 18px;
					cursor: pointer;
					transition: all .2s;
				}

				.click {
					background-color: #fff;
					color: black;
				}
			}
		}

		.aside-right {
			position: absolute;
			left: 0;
			width: 130px;
			height: 100%;
			background-color: #444;
			left: 130px;
			border-right: 1px solid #E6E6E6;
			box-sizing: border-box;
			background-color: #fff;

			.aside-right-title {
				width: 100%;
				height: 60px;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				letter-spacing: 2px;
				font-size: 18px;
				transition: all .2s;
				border-bottom: 1px solid #E6E6E6;
				color: darkgray;


			}

			.item {
				width: 100%;
				height: 60px;
				display: flex;
				justify-content: center;
				align-items: center;
				line-height: 60px;
				box-sizing: border-box;

				.item_text {
					color: black;
				}

				.item_text:hover {
					color: #409EFF;
					cursor: pointer;
				}

				.click {
					width: 100px;
					height: 35px;
					line-height: 35px;
					text-align: center;
					border-radius: 2px;
					font-size: 15px;
					background-color: #ebedf0;

				}
			}
		}

	}

	.el-main {
		background-color: #e3e3e3;
		overflow: hidden;
	}

	body>.el-container {
		margin-bottom: 40px;
	}

	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}

	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}
</style>